<link rel="stylesheet" type="text/css" href="css/password.css"/>
<div class="r_content">
	<h3 class="mc_title">
		<span class="mctit_1"><span class="mctit_2">更改头像图片 </span></span>
	</h3>
    <div class="password">
        <form name="mainForm" id="mainForm"
              method="post" action="call/uploadAvatar.php"
              enctype="multipart/form-data" target="hideFrame">
            <span class="txt">图片文件：</span>
            <input name="step" value="1" type="hidden"/>
            <input type="file" name="upfile" id="dimg"/> <!-- -->
            <button id="upload" class="upphoto" type="submit">上传</button>
            <div>（支持jpg、jpeg、gif、png、bmp格式的图片,请上传像素<1000*600且大小<1M的图片。）</div>
            <div id="newAvatar">
                <img src="about:blank" id="newAvatarSrc" style="display: none;width:auto;height:auto;"/>
            </div>
        </form>
        <form id="form_save" action="call/uploadAvatar.php" target="hideFrame" style="display:none;">
            <input type="hidden" id="imgSrc" name="imgSrc"  />
            <input name="step" value="2" type="hidden"/>
            <input type="hidden" id="x" name="x" />
            <input type="hidden" id="y" name="y" />
            <input type="hidden" id="w" name="w" />
            <input type="hidden" id="h" name="h" />
            <div id="btn_saves" class="save_btn">
                <input type="submit" value="保存选中区域" id="btn_save_region" class="bbb">
                <!--<input type="button" value="保存全图" id="btn_save_all" class="BUTTON SUBMIT"> 选择“保存全图”头像
                      window.navigate("jb51.jsp");                                                                           可能会变形-->
            </div>
        </form>
    </div>
    <iframe src="about:blank" style="display: none;" id="hideFrame" name="hideFrame" frameborder="0" ></iframe>
</div>
<link rel="stylesheet" href="js/plugin/jcrop/jquery.Jcrop.min.css"/>
<script src="js/plugin/jcrop/jquery.Jcrop.min.js"></script>
<script>
    function ShowImg(path, width, height)
    {
        jQuery("#form_save").show();
        jQuery("#imgSrc").val(path);
        jQuery("img#newAvatarSrc")
                .attr('src', path)
                .attr('width',width)
                .attr('height', height)
                .show();
        jQuery('#newAvatarSrc').ready(function(){
            jQuery('#newAvatarSrc').Jcrop({
                setSelect: [ 10, 10, 150, 150 ],
                aspectRatio: 1,
                bgOpacity:0.2,
                borderOpacity:1,
                handleOpacity:0.5,
                handleSize:9,
                createBorders: 	['n','s','e','w'],
                minSelect:[10,10],
                maxSize:[600,600],
                minSize:[10,10],
                onChange: updateCoords,
                onSelect: updateCoords
            });
        });
        jQuery('#btn_saves').show();
    }
    function updateCoords(c)
    {
        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);
    };

    function checkCoords()
    {
        if (parseInt($('#w').val())) return true;
        alert('Please select a crop region then press submit.');
        return false;
    };
</script>